<template>
  <vue-draggable-resizable
    :w="dragStyles.w"
    :h="dragStyles.h"
    :min-width="360"
    :min-height="300"
    :max-width="1900"
    :max-height="1000"
    :parent="false"
    :active="true"
    :x="dragStyles.x"
    :y="dragStyles.y"
    :z="999"
    class-name="chart-panel-drag"
    class-name-handle="my-handle-class"
    @resizing="onResize"
    @dragging="onDrag"
  >
    <div id="chart-panel" class="chart-panel">
      <div id="title" class="title">
        <!-- <span>机构类型</span> -->
        <i class="close icon-font el-icon-close" @click="close"></i>
        <i class="close icon-font el-icon-zoom-in" @click="changeSize"></i>
      </div>
      <div class="echarts-select">
        <div class="selectBox">
          <el-select
            class="pos"
            style="margin-left:10px;"
            v-model="iden_num.selectedValue"
            size="mini"
            @change="changeShowIdenNum"
            :popper-append-to-body="false"
          >
            <el-option
              v-for="item in iden_num.iden_num_arr"
              :key="item.value"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
        </div>
        <div class="changeEcharts">
          <span class="pos fontClass" @click="initLineChart" title="折线图">
            <img style="width:18px;height:auto;" src="../images/line_a.png" alt="折线图" />
          </span>
          <span class="pos fontClass" @click="initBarDJChart" title="堆积图">
            <img style="width:18px;height:auto;" src="../images/bar_a.png" alt="堆积图" />
          </span>
          <span class="pos fontClass" @click.prevent="initBarChart" title="多柱状图">
            <img style="width:18px;height:auto;" src="../images/bar_b.png" alt="多柱状图" />
          </span>
          <!-- <span class="pos fontClass" @click.prevent="initParallelChart" title="平行坐标图">
          <img style="width:16px;height:auto;" src="../images/parallel.png" alt="平行坐标图" />
          </span>-->
          <span class="pos fontClass" @click.prevent="initNestedPiesChart" title="极地坐标图">
            <img style="width:16px;height:auto;" src="../images/nested_pies.png" alt="极地坐标图" />
          </span>
          <span class="pos fontClass" @click.prevent="initTreemapChart" title="矩形树图">
            <img style="width:16px;height:auto;" src="../images/treemap.png" alt="矩形树图" />
          </span>
        </div>
      </div>
      <div class="chart-content">
        <div class="chart" id="chart-container" v-show="!iSnoData" :style="chartBoxStyle"></div>
        <h2 class="noData" v-show="iSnoData">暂无数据</h2>
      </div>
    </div>
  </vue-draggable-resizable>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import echarts from "echarts";
import axios from "axios";
import microConfig from "static/config/micro.js";
import * as microAPI from "@/pages/micro/api/micro.js";
import "echarts/theme/macarons.js";
export default {
  name: "Echarts",
  data() {
    return {
      pieShow: true,
      num_codes: "",
      enu_codes: "",
      iSnoData: true,
      changeEchartsStyle: false,
      tableVisible: false,
      tableData: [],
      myChart: null,
      selectedSearchData2: this.getSelectedSearchData,
      selectedSearchParams: {},
      regionNameList: [],
      regionNameListTree:[],//树的区划名
      echartsStyle: "line",
      zoomEcharts: false,
      chartBoxStyle: {
        width: "360px",
        height: "220px"
      },
      dragStyles: {
        x: document.documentElement.clientWidth - 410,
        y: 510,
        w: 360,
        h: 300
      },
      iden_num: {
        //数字下拉参数
        iden_num_arr: [], //数字指标
        selectedValue: "" //选中值
      },
      region: [] //所有区划名称
    };
  },
  mounted() {
    EventBus.$on("changeMainData", changeTableData => {
      this.region = [];
      this.tableData = changeTableData.tableData;
      if (changeTableData.iden_num_arr.length > 0) {
        this.iden_num.iden_num_arr = changeTableData.iden_num_arr;
        this.iden_num.selectedValue = changeTableData.iden_num_arr[0].name;
      }

      if (this.tableData.tableData.length) {
        this.iSnoData = false;
        this.getAllRegion();
        switch (this.echartsStyle) {
          case "line":
            this.initLineChart();
            break;
          case "bar":
            this.initBarChart();
            break;
          case "barDJ":
            this.initBarDJChart();
            break;
          // case "parallel":
          //   this.initParallelChart()
          //   break;
          case "nestedPies":
            this.initNestedPiesChart();
            break;
          case "treemap":
            this.initTreemapChart();
            break;
          default:
            break;
        }
      } else {
        this.iSnoData = true;
      }
    });
    // this.tableData = this.echartsData
    EventBus.$on("onChart-action", this.onEchartsAction);
    EventBus.$on("offChart-action", this.offEchartAction);
    EventBus.$on("clearMicroAllChart", () => {
      this.iSnoData = true;
      this.tableData = [];
    });
    EventBus.$on("chartType", type => {
      this.echartsStyle = type;
      switch (this.echartsStyle) {
        case "line":
          this.initLineChart();
          break;
        case "bar":
          this.initBarChart();
          break;
        case "barDJ":
          this.initBarDJChart();
          break;
        // case "parallel":
        //   this.initParallelChart()
        //   break;
        case "nestedPies":
          this.initNestedPiesChart();
          break;
        case "treemap":
          this.initTreemapChart();
          break;
        default:
          break;
      }
    });
    EventBus.$on("fullScreen", () => {
      this.resetDragStyles();
    });
  },
  computed: {
    ...mapState({
      showFastCollectLayer: state => state.micro.showFastCollectLayer,
      showQueryTableLayer: state => state.micro.showQueryTableLayer,
      showmacroqueryall: state => state.micro.showmacroqueryall,
      echartsData: state => state.micro.echartsData,
      enlargeChart: state => state.micro.enlargeChart,
      showMapControl: state => state.micro.showMapControl,
      showEchartsLayer: state => state.micro.showEchartsLayer,
      showMapTableLayer: state => state.micro.showMapTableLayer
    })
  },
  beforeDestroy() {
    EventBus.$off("changeMainData");
    EventBus.$off("onChart-action");
    EventBus.$off("offChart-action");
    EventBus.$off("clearMicroAllChart");
    EventBus.$off("chartType");
    EventBus.$off("fullScreen");
  },
  methods: {
    ...mapMutations([
      "changeShowMapTableLayer",
      "changeShowEchartsLayer",
      "changeShowMapControl",
      "changeShowFastCollectLayer",
      "changeShowTypeTabLayer",
      "changeshowmacroqueryall",
      "changeechartsData",
      "changeisZoomEcharts"
    ]),
    //获取所有区划
    getAllRegion() {
      let arr = this.tableData.tableData;
      this.region = [];
      arr.map(item => {
        this.region.push(item["区划"]);
      });
    },
    changeSize() {
      this.$store.commit("changeEnlargeChart", true);
      // this.$store.commit("changeEnlargeTable", false);
      this.$store.commit("changeShowMapControl", false);
      this.$store.commit("changeShowMapTableLayer", false);
      this.$store.commit("changeShowEchartsLayer", false);
      EventBus.$emit("currentChartType", this.echartsStyle);
    },
    resetDragStyles() {
      let left = document.documentElement.clientWidth - 410;
      $(".chart-panel-drag").css({
        width: "360px",
        height: "300px",
        left: left,
        top: "510px"
      });
      this.dragStyles.x = left;
      this.dragStyles.y = 510;
      this.dragStyles.w = 360;
      this.dragStyles.h = 300;
      this.chartBoxStyle.width = "360px";
      this.chartBoxStyle.height = "220px";
      setTimeout(
        this.myChart.resize({
          width: "360px",
          height: "220px"
        }),
        1500
      );
    },
    onResize(x, y, width, height) {
      this.dragStyles.x = x;
      this.dragStyles.y = y;
      this.dragStyles.w = width;
      this.dragStyles.h = height;
      this.chartBoxStyle.width = width + "px";
      this.chartBoxStyle.height = height - 75 + "px";
      this.myChart.resize({
        width: width + "px",
        height: height - 75 + "px"
      });
    },
    onDrag(x, y, width, height) {
      this.dragStyles.x = x;
      this.dragStyles.y = y;
    },
    onEchartsAction(data) {
      if (this.myChart) {
        let index = 0;
        if(this.echartsStyle == "treemap"){
          this.regionNameListTree.map((item, i) => {
            if (data == item) {
              index = i;
            }
          });
        }else{
          this.regionNameList.map((item, i) => {
            if (data == item) {
              index = i;
            }
          });
        }
        this.myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: index
        });
        this.myChart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: index
        });
      }
    },
    offEchartAction(data) {
      if (this.myChart) {
        this.myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0
        });
        this.myChart.dispatchAction({
          type: "hideTip",
          seriesIndex: 0
        });
      }
    },
    //更新显示的数字指标
    changeShowIdenNum() {
      switch (this.echartsStyle) {
        case "line":
          this.initLineChart();
          break;
        case "bar":
          this.initBarChart();
          break;
        case "barDJ":
          this.initBarDJChart();
          break;
        case "parallel":
          this.initParallelChart();
          break;
        case "nestedPies":
          this.initNestedPiesChart();
          break;
        case "treemap":
          this.initTreemapChart();
          break;
        default:
          break;
      }
    },
    initLineChart() {
      this.echartsStyle = "line";
      let data = this.tableData;
      let xAxisData = [];
      let series = [];
      let legend = [];
      if (data.tableLegend.length) {
        data.tableLegend.map(ite => {
          if (ite.name == "区划") {//组装X轴数据
            if (data.tableData.length) {
              data.tableData.map(item => {
                if(item["区划"]=="总计"){//过滤掉总计
                  return;
                }
                xAxisData.push(item["区划"]);
                return item;
              });
            }
          } else {
            if (data.changeNum == "all") {
              //总量分组
              if (ite.name.indexOf(this.iden_num.selectedValue) != -1) {
                legend.push(ite.name);
                let seriesItem = {
                  type: "line",
                  stack: "总量",
                  areaStyle: {},
                  connectNulls: true
                };
                seriesItem.name = ite.name;
                seriesItem.data = [];
                if (data.tableData.length) {
                  data.tableData.map(item => {
                    if(item["区划"]=="总计"){//过滤掉总计
                      return;
                    }
                    if (item[ite.name] == "-") {
                      seriesItem.data.push(null);
                    } else {
                      seriesItem.data.push(item[ite.name]);
                    }
                    return item;
                  });
                }
                series.push(seriesItem);
              }
            } else if (data.changeNum != "all") {
              //多分组值
              if (ite.name.indexOf(this.iden_num.selectedValue) != -1) {
                //数字指标匹配
                legend.push(ite.name);
                if (ite.hasOwnProperty("children")) {
                  //取该指标下所有分组值
                  let childIden = ite.children;
                  childIden.map(child => {
                    if(child.title == "总计"){
                      return;
                    }
                    let seriesItem = {
                      type: "line",
                      stack: "总量",
                      areaStyle: {},
                      connectNulls: true
                    };
                    seriesItem.name = child.title;
                    seriesItem.data = [];
                    if (data.tableData.length) {
                      data.tableData.map(item => {
                        if(item["区划"]=="总计"){//过滤掉总计
                          return;
                        }
                        if (item[child.name] == "-") {
                          seriesItem.data.push(null);
                        } else {
                          seriesItem.data.push(item[child.name]);
                        }
                      });
                    }
                    series.push(seriesItem);
                  });
                }
              }
            }
          }
        });
      }
      this.regionNameList = xAxisData;
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            axis: "x",
            label: {
              show: false
            }
          }
        },
        connectNulls: true,
        grid: {
          left: "6%",
          top: "6%",
          bottom: "20%",
          containLabel: true
        },
        calculable: true,
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: xAxisData,
          axisLine: {
            lineStyle: {
              color: "rgba(255,255,255,.6)"
            }
          }
        },
        yAxis: {
          type: "value",
          axisLabel: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: "rgba(255,255,255,.6)"
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,.6)"
            }
          }
        },
        series: series
      };
      this.renderChart(option);
    },
    initBarChart() {
      this.echartsStyle = "bar";
      let data = this.tableData;
      let xAxisData = [];
      let series = [];
      let legend = [];
      setTimeout(() => {
        if (data.tableLegend.length) {
          data.tableLegend.map(ite => {
            if (ite.name == "区划") {//组装X轴
              if (data.tableData.length) {
                data.tableData.map(item => {
                  if(item["区划"]=="总计"){//过滤掉总计
                    return;
                  }
                  xAxisData.push(item["区划"]);
                  return item;
                });
              }
            } else {
              if (data.changeNum == "all") {
                //总量分组
                if (ite.name.indexOf(this.iden_num.selectedValue) != -1) {
                  legend.push(ite.name);
                  let seriesItem = {
                    type: "bar",
                    // stack: "总量",
                    areaStyle: {}
                  };
                  seriesItem.name = ite.name;
                  seriesItem.data = [];
                  if (data.tableData.length) {
                    data.tableData.map(item => {
                      if(item["区划"]=="总计"){//过滤掉总计
                        return;
                      }
                      if (item[ite.name] == "-") {
                        seriesItem.data.push(null);
                      } else {
                        seriesItem.data.push(item[ite.name]);
                      }
                      return item;
                    });
                  }
                  series.push(seriesItem);
                }
              } else if (data.changeNum != "all") {
                //多指标多分组值
                if (ite.name.indexOf(this.iden_num.selectedValue) != -1) {
                  //数字指标匹配
                  legend.push(ite.name);
                  if (ite.hasOwnProperty("children")) {
                    //取该指标下所有分组值
                    let childIden = ite.children;
                    childIden.map(child => {
                      if(child.title == "总计"){//过滤掉总计
                        return;
                      }
                      let seriesItem = {
                        type: "bar",
                        // stack: "总量",
                        areaStyle: {},
                        connectNulls: true
                      };
                      if (data.changeNum != "all") {
                        //其他分组去除指标文字
                        seriesItem.name = child.title;
                      }
                      seriesItem.data = [];
                      if (data.tableData.length) {
                        data.tableData.map(item => {
                          if(item["区划"]=="总计"){//过滤掉总计
                            return;
                          }
                          if (item[child.name] == "-") {
                            seriesItem.data.push(null);
                          } else {
                            seriesItem.data.push(item[child.name]);
                          }
                        });
                      }
                      series.push(seriesItem);
                    });
                  }
                }
              }
            }
            return ite;
          });
        }
        this.regionNameList = xAxisData;
        var option = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
              axis: "x",
              label: {
                show: false
              }
            }
          },
          barMaxWidth: 40,
          grid: {
            left: "6%",
            top: "6%",
            bottom: "20%",
            containLabel: true
          },
          xAxis: {
            type: "category",
            data: xAxisData,
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.6)"
              }
            }
          },
          yAxis: {
            type: "value",
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.6)"
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(255,255,255,.6)"
              }
            }
          },
          series: series
        };
        this.renderChart(option);
      }, 300);
    },
    initBarDJChart() {
      this.echartsStyle = "barDJ";
      let data = this.tableData;
      let xAxisData = [];
      let series = [];
      let legend = [];
      setTimeout(() => {
        if (data.tableLegend.length) {
          data.tableLegend.map(ite => {
            if (ite.name == "区划") {//组装X轴
              if (data.tableData.length) {
                data.tableData.map(item => {
                  if(item["区划"]=="总计"){//过滤掉总计
                    return;
                  }
                  xAxisData.push(item["区划"]);
                  return item;
                });
              }
            } else {
              if (
                data.changeNum == "all"
              ) {
                //总量分组
                if (ite.name.indexOf(this.iden_num.selectedValue) != -1) {
                  legend.push(ite.name);
                  let seriesItem = { type: "bar" };
                  seriesItem.name = ite.name;
                  seriesItem.data = [];
                  if (data.tableData.length) {
                    data.tableData.map(item => {
                      if(item["区划"]=="总计"){//过滤掉总计
                        return;
                      }
                      if (item[ite.name] == "-") {
                        seriesItem.data.push(null);
                      } else {
                        seriesItem.data.push(item[ite.name]);
                      }
                      return item;
                    });
                  }
                  series.push(seriesItem);
                }
              } else if (
                data.changeNum != "all"
              ) {
                //多指标多分组值
                if (ite.name.indexOf(this.iden_num.selectedValue) != -1) {
                  //数字指标匹配
                  legend.push(ite.name);
                  if (ite.hasOwnProperty("children")) {
                    //取该指标下所有分组值
                    let childIden = ite.children;
                    childIden.map(child => {
                      if(child.title == "总计"){
                        return;
                      }
                      let seriesItem = {
                        type: "bar",
                        stack: "总量",
                        areaStyle: {},
                        connectNulls: true,
                        name : child.title,
                        data:[]
                      };
                      if (data.tableData.length) {
                        data.tableData.map(item => {
                          if(item["区划"]=="总计"){//过滤掉总计
                            return;
                          }
                          if (item[child.name] == "-") {
                            seriesItem.data.push(null);
                          } else {
                            seriesItem.data.push(item[child.name]);
                          }
                        });
                      }
                      series.push(seriesItem);
                    });
                  }
                }
              }
            }
            return ite;
          });
        }
        this.regionNameList = xAxisData;
        var option = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              axis: "x",
              label: {
                show: false
              }
            }
          },
          barMaxWidth: 40,
          grid: {
            left: "6%",
            top: "6%",
            bottom: "20%",
            containLabel: true
          },
          xAxis: {
            type: "category",
            data: xAxisData,
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.6)"
              }
            }
          },
          yAxis: {
            type: "value",
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.6)"
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(255,255,255,.6)"
              }
            }
          },
          series: series
        };
        this.renderChart(option);
      }, 300);
    },
    initParallelChart() {
      let data = this.tableData;
      this.echartsStyle = "parallel";
      setTimeout(() => {
        if (data.tableLegend.length > 2) {
          //x轴枚举
          let schema = [];
          let seriesData = [];
          let parallelAxisData = [];
          let lineStyle = {
            normal: {
              width: 2,
              opacity: 0.5
            }
          };
          let legendData = [];
          if (data.tableLegend.length) {
            data.tableLegend.map((item, index) => {
              if (
                item.name != "区划" &&
                item.name.indexOf(this.iden_num.selectedValue) != -1
              ) {
                let obj = { index: index };
                let dataObj = [];
                obj.name = item.value;
                obj.text = item.name;
                schema.push(obj);
              }
            });
          }
          if (schema.length) {
            schema.map((item, index) => {
              let obj = { dim: item.index, name: item.text };
              parallelAxisData.push(obj);
            });
          }
          if (data.tableData.length) {
            data.tableData.map((item, index) => {
              let dataArr = [];
              let obj = { type: "parallel" };
              if (index < 8) {
                legendData.push(item["区划"]);
              }
              if (data.tableLegend.length) {
                data.tableLegend.map((ite, index) => {
                  if (ite.name != "区划") {
                    dataArr.push(item[ite.name]);
                  }
                });
              }
              obj.data = [dataArr];
              obj.lineStyle = lineStyle;
              obj.name = item["区划"];
              seriesData.push(obj);
            });
          }
          var option = {
            parallelAxis: parallelAxisData,
            legend: {
              data: legendData,
              bottom: 10,
              width: 330,
              height: 60,
              padding: 3,
              textStyle: {
                color: "#fff",
                fontSize: 12
              }
            },
            series: seriesData,
            parallel: {
              top: 40,
              left: 30,
              right: 60,
              tooltip: {
                trigger: "item",
                triggerOn: "mousemove"
              },
              parallelAxisDefault: {
                axisLabel: {
                  textStyle: {
                    color: "#fff"
                  }
                },
                nameTextStyle: {
                  color: "#fff",
                  fontSize: 12
                },
                axisLine: {
                  lineStyle: {
                    color: "#fff"
                  }
                }
              }
            }
          };
          this.renderChart(option);
        } else {
          var option = {
            parallelAxis: [],
            legend: {
              data: [],
              bottom: 10,
              width: 330,
              height: 60,
              padding: 3,
              textStyle: {
                color: "#fff",
                fontSize: 12
              }
            },
            series: [],
            parallel: {
              top: 10,
              left: 30,
              right: 60,
              tooltip: {
                trigger: "item",
                triggerOn: "mousemove"
              },
              parallelAxisDefault: {
                axisLabel: {
                  textStyle: {
                    color: "#fff"
                  }
                },
                nameTextStyle: {
                  color: "#fff",
                  fontSize: 12
                },
                axisLine: {
                  lineStyle: {
                    color: "#fff"
                  }
                }
              }
            }
          };
          this.renderChart(option);
        }
      }, 300);
    },
    initNestedPiesChart() {
      this.echartsStyle = "nestedPies";
      let data = this.tableData;
      setTimeout(() => {
        let angleData = []; //枚举(区划)
        let seriesData = [];
        let pieData = {};//外层数据
        pieData.data = [];
        pieData.type = "pie";
        pieData.radius = ["85%", "80%"];
        pieData.top = 10;
        pieData.avoidLabelOverlap = false;
        pieData.labelLine = { normal: { show: false } };
        pieData.label = {
          normal: {
            show: true,
            position: "outside",
            color: "#fff"
          },
          emphasis: {
            show: true,
            textStyle: {
              fontSize: "15",
              fontWeight: "normal",
              color: "#fff"
            }
          }
        };
        data.tableData.map(ite => {
          if(ite["区划"]!="总计"){
            angleData.push(ite["区划"]);
          }
        });
        let pieDataData = [];
        data.tableLegend.map((legend, index) => {//组装内部柱状图数据
          if (index && legend.name.indexOf(this.iden_num.selectedValue) != -1) {
            if(legend.hasOwnProperty("children")){//多个分组值
              let pie = {};
              pie.name = legend.title;
              let legendChild = legend.children;
              legendChild.map((child)=>{
                if(child.title!="总计"){
                  let obj = {};
                  obj.data = [];
                  obj.type = "bar";
                  obj.coordinateSystem = "polar";
                  obj.top = 10;
                  obj.stack = "a";
                  obj.name = child.title;
                  data.tableData.map(data => {
                    if(data["区划"]!="总计"){
                      obj.data.push({ value: data[child.name], name: data["区划"] });
                    }
                  });
                  seriesData.push(obj);
                }else{//总计数据放入外层圆
                  pie.value = data.tableData[0][child.name];
                }
              })
              pieDataData.push(pie);//获取外层圆数据（数字指标总计数）
            }else{
              let pie = {};
              pie.name = legend.name;
              if(legend.name!="总计"){
                let obj = {};
                obj.data = [];
                obj.type = "bar";
                obj.coordinateSystem = "polar";
                obj.top = 10;
                obj.stack = "a";
                obj.name = legend.name;
                data.tableData.map(data => {
                  if(data["区划"]!="总计"){
                    obj.data.push({ value: data[legend.name], name: data["区划"] });
                  }
                });
                seriesData.push(obj);
              }
              pie.value = data.tableData[0][legend.name];
              pieDataData.push(pie);
            }
          }
          return legend;
        });
        pieData.data = pieDataData;
        seriesData.push(pieData);
        var option = {
          title: { id: "nestedPies" },
          tooltip: {
            trigger: "item"
          },
          angleAxis: {
            type: "category",
            data: angleData,
            z: 10,
            axisLine: {
              lineStyle: {
                color: "#ffffff"
              }
            }
          },
          radiusAxis: {
            nameTextStyle: {
              color: "#ffffff"
            },
            axisLine: {
              lineStyle: {
                color: "#ffffff"
              }
            }
          },
          polar: {
            center: ["50%", "50%"],
            radius: "70%"
          },
          series: seriesData
        };
        this.renderChart(option);
      }, 300);
    },
    initTreemapChart() {
      let that = this;
      this.echartsStyle = "treemap";
      let data = this.tableData;
      let seriesData = [];
      setTimeout(() => {
        if (data.tableLegend.length) {
          data.tableLegend.map(item => {
            if (
              item.name != "区划" &&
              item.name.indexOf(this.iden_num.selectedValue) != -1
            ) {
              if(item.hasOwnProperty("children")){//多分组
                let childLegend = item.children;
                childLegend.map(legend =>{
                  if(legend.title!="总计"){//过滤掉总计
                    let obj = { value: 0, children: [] };//分组
                    obj.name = legend.title;
                    that.regionNameListTree = [];
                    data.tableData.map(ite => {
                      if(ite["区划"]!="总计"){//过滤掉总计
                        let objChildren = {};
                        obj.value += ite[legend.title];
                        objChildren.name = ite["区划"];
                        objChildren.value = ite[legend.name];
                        obj.children.push(objChildren);
                        that.regionNameListTree.push(objChildren.name);
                      }
                    });
                    obj.value = data.tableData[0][legend.name];
                    seriesData.push(obj);
                  }
                })
              }else{//总量分组
              that.regionNameListTree = [];
                if(item.name!="总计"){//过滤掉总计
                  let obj = { value: 0, children: [] };
                  obj.name = item.name;
                  data.tableData.map(ite => {
                    if(ite["区划"]!="总计"){//过滤掉总计
                      let objChildren = {};
                      obj.value += ite[item.name];
                      objChildren.name = ite["区划"];
                      objChildren.value = ite[item.name];
                      obj.children.push(objChildren);
                      that.regionNameListTree.push(objChildren.name);
                    }
                  });
                  obj.value = data.tableData[0][this.iden_num.selectedValue];
                  seriesData.push(obj);
                }
              }
            }
          });
        }
        var option = {
          tooltip: {
            show: true,
            formatter: function (data) {
              let result = "";
              let treePathInfo = data.treePathInfo;
              let len = treePathInfo.length-1;
              treePathInfo.map((info,index) =>{
                if(info.name!=that.iden_num.selectedValue){
                  if(index!=len){
                    result +=info.name+"</br>";
                  }else{
                    result +=info.name+":"+info.value+"</br>";
                  }
                }
              })
              return result;
            }
          },
          color: ["rgb(42,230,218)"],
          series: [
            {
              type: "treemap",
              name: this.iden_num.selectedValue,
              top: 10,
              breadcrumb: {
                show: true,
                top: "88%"
              },
              data: seriesData,
              leafDepth: 2,
              levels: [
                {
                  itemStyle: {
                    normal: {
                      borderColor: "rgba(255,255,255,.6)",
                      borderWidth: 2,
                      gapWidth: 4
                    }
                  }
                },
                {
                  colorSaturation: [0.3, 0.6],
                  itemStyle: {
                    normal: {
                      borderColorSaturation: 0.7,
                      gapWidth: 5,
                      borderWidth: 2
                    }
                  }
                },
                {
                  colorSaturation: [0.3, 0.5],
                  itemStyle: {
                    normal: {
                      borderColorSaturation: 0.6,
                      gapWidth: 1
                    }
                  }
                },
                {
                  colorSaturation: [0.3, 0.5]
                }
              ]
            }
          ]
        };
        this.renderChart(option);
      }, 300);
    },
    renderChart(option) {
      let that = this;
      this.myChart = echarts.dispose(
        document.getElementById("chart-container")
      );
      this.myChart = echarts.init(
        document.getElementById("chart-container"),
        "macarons"
      );
      this.myChart.on("mousemove", function(params) {
        if (that.region.indexOf(params.name) != -1) {
          EventBus.$emit("table-actiontrigger", params.name);
          EventBus.$emit("onChartMap", params.name);
        }
      });
      this.myChart.on("mouseout", function(params) {
        if (that.region.indexOf(params.name) != -1) {
          EventBus.$emit("table-heighLightOff", params.name);
          EventBus.$emit("offChartMap", params.name);
        }
      });
      this.myChart.on("click", function(params) {
        let data = that.tableData;
        if (
          params.componentSubType != "treemap" &&
          params.dimensionNames[0] == "radius" &&
          params.componentSubType == "bar"
        ) {
          var index = params.dataIndex;
          var i = option.series.length - 1;
          let pieData = [];
          data.tableData.map(item => {
            if (item["区划"] == params.name) {
              data.tableLegend.map((ite, i) => {
                if (i) {
                  let pie = {};
                  pie.name = ite.name;
                  pie.value = item[ite.name];
                  pieData.push(pie);
                }
              });
            }
          });
          option.series[i].data = pieData;
          that.myChart.setOption(option);
        }
      });
      this.myChart.on("dblclick", function(params) {
        if (that.region.indexOf(params.name) != -1) {
          that.updateRegion(params.name);
        }
      });
      this.myChart.setOption(option);
    },
    //双击更新区划下钻
    updateRegion(name) {
      let tableData = this.tableData.tableData;
      let updateRegion = [];
      for (let i in tableData) {
        if (tableData[i]["区划"] == name) {
          updateRegion.push(tableData[i].region);
        }
      }
      if (updateRegion.length > 0) {
        EventBus.$emit("changeToolRegion", updateRegion);
      }
    },
    close() {
      this.$emit("close");
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "../css/rule.scss";
.chart-panel {
  font-size: 1.4rem;
  z-index: 999;
  background: $panelContentBg;
  -webkit-box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.3);
  box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.3);
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  min-width: 360px;
  min-height: 300px;
  .title {
    height: 35px;
    background: $panelTitleBg;
    font-size: 1.6rem;
    cursor: move;
    span {
      float: left;
      line-height: 35px;
      margin-left: 15px;
      font-weight: bold;
    }
    .icon-font {
      float: right;
      line-height: 35px;
      cursor: pointer;
    }
    .close {
      margin-right: 8px;
      color: #fff;
    }
    .fscreen {
      margin-right: 18px;
    }
  }
  .nav {
    height: 45px;
    border-bottom: #eaeaea solid 1px;
    .pos {
      float: left;
      margin-left: 15px;
      line-height: 45px;
    }
    .fontClass {
      cursor: pointer;
      font-size: 2rem;
      color: #017bce;
    }
  }
  .chart-content {
    height: calc(100% - 81px);
    width: 100%;
    position: relative;
    #chart-container {
      // height: 220px;
      // width: 360px;
      min-width: 360px;
      min-height: 220px;
      position: absolute;
    }
  }
  .echarts-select {
    height: 30px;
    .selectBox {
      float: left;
      margin-top: 5px;
      input.el-input__inner {
        background-color: #17809a;
        border: 1px solid #2f8da4;
        color: $fontColorLimit;
      }
    }
  }
  .changeEcharts {
    width: 130px;
    float: right;
    z-index: 9999;
    padding: 10px 0;
  }
  .noData {
    text-align: center;
    line-height: 10;
    color: rgba(255, 255, 255, 0.6);
    margin-left: 0;
    display: inline-block;
    width: 100%;
    font-size: 14px;
    font-weight: normal;
  }
  .changeEcharts {
    span {
      cursor: pointer;
    }
  }
}
</style>
<style rel="stylesheet/scss" lang="scss" >
.draggable {
  .my-handle-class {
    width: 10px;
    height: 10px;
    background: transparent;
    position: absolute;
  }
  .my-handle-class-tl {
    z-index: 999;
    cursor: nw-resize;
  }
  .my-handle-class-tm {
    width: 100%;
    cursor: n-resize;
  }
  .my-handle-class-tr {
    top: 0;
    right: 0;
    z-index: 999;
    cursor: ne-resize;
  }
  .my-handle-class-mr {
    height: 100%;
    right: 0;
    cursor: e-resize;
    z-index: 1000;
  }
  .my-handle-class-br {
    bottom: 0;
    right: 0;
    z-index: 999;
    cursor: se-resize;
  }
  .my-handle-class-bm {
    bottom: 0;
    width: 100%;
    cursor: s-resize;
  }
  .my-handle-class-bl {
    bottom: 0;
    left: 0;
    z-index: 999;
    cursor: sw-resize;
  }
  .my-handle-class-ml {
    height: 100%;
    cursor: e-resize;
    z-index: 1000;
  }
}
#chart-panel {
  .echarts-select {
    input.el-input__inner {
      background-color: #17809a;
      border: 1px solid #2f8da4;
      color: rgba(255, 255, 255, 0.8);
    }
  }
}
</style>